<template>
	<view :class="['mx-date-btn', isTheDay ? 'active': '']" @tap="onTap">
		<text class="date-week">{{week}}</text>
		<text class="date-day">{{day}}</text>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState
	} = createNamespacedHelpers('arena')
	export default {
		name: "MxDateBtn",
		props: {
			// 该组件的 dayjs 对象
			dayObj: {
				type: Object
			},

			// 当前激活的 dayjs 对象
			active: {
				type: Object
			}
		},
		data() {
			return {

			};
		},
		computed: {
			...mapState(['weekStr']),
			week() {
				return this.weekStr[this.dayObj.day]
			},

			day() {
				return this.dayObj.date
			},

			isTheDay() {
				return this.dayObj.day == this.active.day
			}
		},
		created() {

		},
		methods: {
			onTap() {
				this.$emit('update:active', this.dayObj)
				// this.$emit('active', this.dayObj)
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/var.scss';

	.mx-date-btn {
		margin: 10rpx 0;
		margin-right: 40rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		width: 92rpx;
		height: 122rpx;
		border-radius: 4px;
		box-shadow: 0 0 3px 0 rgba($color: #000, $alpha: .16);
		display: inline-flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		font-size: 14px;
		color: #707070;
		font-family: $font-family;

		&.active {
			background-image: $bg-gradient;
			color: #fff;
		}

		&:first-child {
			margin-left: 32rpx;
		}

		&:last-child {
			margin-right: 32rpx;
		}

		.date-week {}

		.date-day {}
	}
</style>
